<template>
    <view>
        <view style="background-color: white">
            <!-- 基础表单校验 -->
            <up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
                <view class="form_part">
                    <up-form-item label="操作描述" prop="text" border-bottom style="padding: 0 10px;">
                        <up-input border="none" v-model="form.text" readonly></up-input>
                    </up-form-item>
                    <up-form-item v-if='unit == "0" || unit == "15"' label="货物数量" prop="goodsCount" border-bottom
                        style="padding: 0 10px;">
                        <up-input placeholder="请输入接单数量" border="none" v-model="form.goodsCount"></up-input>
                    </up-form-item>
                    <up-form-item label="车辆选择" prop="vehicleIds" border-bottom @click="selectCar"
                        style="padding: 0 10px;">
                        <up-input placeholder="请选择车辆" disabled disabledColor="#fff" border="none"
                            v-model="form.vehicleIds"></up-input>
                        <template v-slot:right>
                            <up-icon name="arrow-right"></up-icon>
                        </template>
                    </up-form-item>
                </view>
            </up-form>
            <up-picker closeOnClickOverlay :show="showPicker" :columns="columns" keyName="licensePlateNumber"
                title="请选择车辆" @confirm="confirmSelect" @close="showPicker = false"
                @cancel="showPicker = false"></up-picker>
        </view>
        <view class="form_button" style="padding: 0 10px;">
            <up-button type="primary" @click="WithConfirm">提交</up-button>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    onMounted
} from "vue"
import {
    getCarList
} from "@/api/car"
import {
    SignForWaybill
} from "@/api/driver"
import {
    onLoad
} from "@dcloudio/uni-app"

/* 数据 */
const formRef = ref<UniFormRef | null>(null)
const uToastRef = ref<any>(null)
const showPicker = ref(false)
// 表单
const form = reactive({
    id: '',
    vehicleId: '',
    text: '接单',
    vehicleIds: undefined,
    goodsCount: '' as string | number
})
const rules = reactive({
    'goodsCount': [
        {
            type: 'string',
            required: true,
            message: '请输入接单数量',
            trigger: ['blur', 'change'],

        }, {
            // 使用 pattern 进行正则校验
            pattern: /^\d+(\.\d+)?$/, // 只允许字母和数字
            // 校验前转换，确保是字符串
            message: '用户名只能包含数字和小数点',
            trigger: ['blur', 'change']
        }
    ],
    'vehicleIds': {
        type: 'string',
        required: true,
        message: '请选择车辆',
        trigger: ['blur', 'change']
    }
})
// 车辆
const columns = reactive<any[]>([])
// 传进来的三个参数
const waybillId = ref('')
const driverId = ref('')
const unit = ref('')


/* 函数 */
// 获取车辆列表
const getCars = async () => {
    uToastRef.value.show({
        type: 'loading',
        message: "请稍等...",
        duration: -1
    })
    let res = await getCarList({
        limit: 100
    })
    uToastRef.value.hide()
    if (res.success) {
        columns.push(res.data.list)
    } else {
        uToastRef.value.show({
            type: 'error',
            message: "获取司机车辆失败",
        })
    }
}
// 打开选择车辆框
const selectCar = () => {
    showPicker.value = true
    uni.hideKeyboard()
}
// 确认选择车辆
const confirmSelect = (e: any) => {
    form.vehicleIds = e.value[0].licensePlateNumber
    form.vehicleId = e.value[0].id
    showPicker.value = false
}
// 提交
const WithConfirm = async () => {
    let valid = await formRef.value?.validate()
    if (valid) {
        let regex = /^\d+(\.\d+)?$/
        if (form.goodsCount) {
            if (!regex.test(form.goodsCount.toString())) {
                uToastRef.value.show({
                    position: "top",
                    message: '货物数量只能为数字加小数点',
                    type: 'warning'
                })
                return
            }
        }
        form.id = waybillId.value
        uToastRef.value.show({
            type: 'loading',
            message: "正在提交",
            duration: -1
        })
        let res = await SignForWaybill(form)
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "已接单",
                duration: 1000,
                complete() {
                    uni.reLaunch({
                        url: '/pages/work/index'
                    })
                }
            })
        }
    }
}




/* 钩子 */
onLoad((options: any) => {
    waybillId.value = options.codeId
    driverId.value = options.driverId
    unit.value = options.unit
    if (options.unit != 0 && options.unit != 15) {
        form.goodsCount = 1
    }
})
onMounted(() => {
    getCars()
})
</script>
